<template>
  <div class="bgColor" :class="dayModel===false?'bFColor':''">
    <el-row>
      <el-col :offset="5" :span="5">
        <img src="../assets/image/1.jpg" width="40" height="40" style="border-radius: 40px">
      </el-col>
      <el-col class="change" :offset="1" :span="2" style="line-height: 40px">
        <i class="iconfont icon-Love" style="color: red"></i>
      </el-col>
      <el-col :span="5" :offset="2">
        <img src="../assets/image/2.jpg" width="40" height="40" style="border-radius: 40px">
      </el-col>
    </el-row>
    <div class="center fontStyle">
      {{allTime}}
    </div>
  </div>
</template>

<script>
export default {
  name: "Lover",
  computed: {
    dayModel(){
      return this.$store.state.dayModel;
    }
  },
  data() {
    return {
      allTime: null,
  }
  },
  mounted() {
    this.$nextTick( () => {
      setInterval(this.getAllTime,1000);
    })
  },
  methods: {
    getAllTime() {
      let dt = new Date("2019-12-18 00:00:00")
      let together = Date.parse(dt);
      let Now = Date.parse(new Date());
      let Mu = (Now - together) / 1000;
      let days = parseInt( Mu/(3600*24) );
      let hour = parseInt( (Mu % (3600*24)) / 3600)
      let min = parseInt( (Mu % 3600) / 60)
      let second = parseInt(Mu % 60)
      this.allTime = days+'天'+hour+'时'+min+'分'+second+'秒';

      // console.log(Date.parse(new Date()));
    }
  }
}
</script>

<style scoped>
.bFColor {
  background-color: #2f3133 !important;
}
.bgColor {
  border-radius: 10px;
  padding: 20px 0;
  background-color: rgb(255,255,255);
}
.change{
  animation: changeBiger 2s ease-in-out infinite alternate;
  animation-delay: 1s;
  -webkit-animation-delay: 5s;
  transform: scale(1.2);
}
@keyframes changeBiger {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.58);
  }
}
.center {
  text-align: center;
}
.fontStyle {
  font-size: 20px;
  margin-top: 5px;
}
</style>